<template>
  <div class="register">
    <van-nav-bar >
      <!-- 插槽#===v-slot -->
      <template #left>
        <div class="logo-box">
          <div class="logo">
            <!-- <img class="auto-img" :src='img' /> -->
          </div>
          <div class="logo-text">壹&nbsp; 嗒&nbsp; 音 &nbsp;乐 </div>
        </div>
      </template>
      <template #right>
        <div class="guang" @click="goPage('Home')">游客模式</div>
      </template>
    </van-nav-bar>
    <div class="user-box">
      <div>
         <div class="welcome-img"></div> 
        <div class="welcome-zhtitle">欢迎注册!</div>
        <div class="welcome-entitle">Welcome to register your accounts</div>
      </div>
      <div class="form-box">
        <van-form @submit="register">
          <van-field
            v-model="userInfo.phone"
            name="phone"
            label="手机号"
            placeholder="手机号"
            autocomplete="off"
            :rules="[{ required: true, message: '请填写手机号' },{pattern:phoneReg,message:'手机号格式不正确'}]"
          />
          <van-field
            v-model="userInfo.password"
            :type="isOpen?'text':'password'"
            name="password"
            label="密码"
            placeholder="密码"
            :right-icon="isOpen?'eye-o':'closed-eye'"
            autocomplete="off"
            @click-right-icon="togglePasswordStatus"
            :rules="[{ required: true, message: '请填写密码' },{pattern:passwordReg,message:'以字母开头6-16位'}]"
          />
          <van-field
            v-model="userInfo.nickname"
            name="nickname"
            label="昵称"
            placeholder="昵称(1-10位)"
            autocomplete="off"
            :rules="[{ required: true, message: '请填写昵称' },{pattern:nickNameReg,message:'中英文数字组合'}]"
          />
          <van-field
            v-model="userInfo.captcha"
            name="captcha"
            label="验证码"
            placeholder="验证码(4位)"
            autocomplete="off"
            :rules="[{ required: true, message: '请填写验证码' },{pattern:captchaReg,message:'支持4位数字'}]"
          />
          <van-button class="code-btn" native-type="button" @click="getCode">发送验证码</van-button>
          <div class="login-btn" style="margin: 16px;">
            <van-button round block type="info" native-type="submit">注&nbsp;&nbsp;&nbsp;册</van-button>
          </div>
          <div class="login-btn" style="margin: 16px;">
            <van-button round block type="info" native-type="button" @click="goPage('Login')">登&nbsp;&nbsp;&nbsp;录</van-button>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import { Notify } from 'vant';
import {getCellphoneExist,getRegisterCellphone,getCaptchaSent} from "../../api/login"
export default {
  name:'Register',
 data() {
   return {
     //头像
    //  img:require("../assets/images/home_active.png"),
      //密码框样式
        isOpen:false,
        //验证手机号
        phoneReg:/^1[3-9]\d{9}$/,
        //验证密码(数字字母下划线组合并且以字母开头6-16位)
        passwordReg:/^[A-Za-z]\w{5,15}$/,
        // 昵称验证(中英文数字组合1-10位)
        nickNameReg:/^[\u4e00-\u9fa5A-Za-z0-9]{1,10}$/,
        captchaReg:/^[0-9]{4}$/,
        userInfo: {
        captcha: '',  
        phone: "",
        password: "",
        nickname:''
      }
   }
 },
 methods: {
    //跳转页面(先逛一逛)
    goPage(name) {
        this.$router.push({name});
        
    },
    //切换密码框显示隐藏状态
    togglePasswordStatus() {
        this.isOpen=!this.isOpen;
    },
    //点击发送按钮
      getCode() {
          let reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|17[0-9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
          //验证手机号
          if(!reg.test(this.userInfo.phone)) {
              Notify({ type: 'warning', message: '请输入正确的手机号!' });
              return;
          }
          
          // 发送请求验证码
          getCaptchaSent({phone: this.userInfo.phone}).then(data=>{
              console.log(data);
              if(data.data) {
                Toast('请求成功');
              }
          }).catch(err=>{
              
          })
      },
    //注册
    register(userInfo) {
      //密码框为空
      if(!this.userInfo.password){
          Notify({ type: 'warning', message: '请输入密码!' });
          return ;
        }
        //昵称为空
        if(!this.userInfo.nickname){
          Notify({ type: 'warning', message: '请输入昵称!' });
          return ;
        }
        //验证手机号是否被注册过
       getCellphoneExist({userInfo}).then(data=>{          
            //验证
            if(data.code==400) {
                Notify({type: 'warning', message: '该手机号已注册过'});
                return;
            }
            // 注册账号
            getRegisterCellphone({userInfo}).then(data=>{
              console.log(data);
            })
        }).catch(err=>{
            
        })
    }

  }
}
</script>

<style lang="less" scoped>
@import url("../../assets/css/base.less");
.van-nav-bar{
    background-color: @mainColor;
}
/deep/ .van-nav-bar__left {
    left: 60px;
}
.van-cell{
    border-radius: 10px;
    margin-bottom: 10px;
}
.van-button--info{
    background-color: #F7BCBF;
    border:none;

} 
.code-btn{
  position: absolute;
  bottom:200px;
  right:30px;
  border-top-right-radius:10px ;
  border-bottom-right-radius: 10px;
  padding:0;
  background-color: #F7BCBF;
  border:none;
  color:#fff;

}  
.register {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color:@mainColor;
  .login-btn {
      margin-top: 50px;
  }
  .form-box {
    margin-top: 50px;
    padding:0 10px;
  }
  .welcome-zhtitle {
      font-size:20px;
      color:#888;
      font-weight:bold;
      margin-bottom: 20px;
  }
  .welcome-img{
      height:90px;
      width:90px;
      border-radius: 50%;
      margin: 0 auto;
      margin-bottom: 10px;
      background-image: url('../../assets/images/login02.jpeg');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
  }
  .welcome-entitle {
      font-size:16px;
      color:#888;
  }
  .user-box {
    padding:0 20px;
  }
  .guang {
      color:#fff;
      font-size:14px;
      font-weight:bold;
  }
  .logo-box {
    display: flex;
    align-items: center;
  }
  .logo {
      width:36px;
      height:36px;
      border-radius:50%;
  }
  .logo-text {
      margin-left: 20px;
      font-size:20px;
      font-weight:bold;
      color:#fff;
  }
}
</style>